<template>
  <div class="update">
    <div class="input_con">
      <input type="text"
             placeholder="账号"
             v-model="zhanghao">
    </div>
    <div class="input_con">
      <input type="text"
             placeholder="旧密码"
             v-model="oldP">
    </div>
    <div class="input_con">
      <input type="text"
             placeholder="请输入新密码"
             v-model="newP">
    </div>
    <div class="input_con">
      <input type="text"
             placeholder="请确认密码"
             v-model="newP1">
    </div>
    <div class="login_con"
         @click="updateAction">确认修改</div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: 'Update',
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data: function () {
    return {
      zhanghao: localStorage.getItem('username'),
      oldP: '',
      newP: '',
      newP1: ''
    }
  },
  methods: {
    updateAction () {
      const url = 'http://localhost:8081/update';
      var params = new URLSearchParams();
      params.append('zhanghao', this.zhanghao);
      params.append('oldP', this.oldP);
      params.append('newP', this.newP);
      params.append('newP1', this.newP1);
      this.$axios({
        method: 'post',
        url: url,
        data: params,
      }).then(res => {
        console.log(res);
        Dialog.alert({
          message: res.data.msg,
        }).then(() => {
          // on close
        });
        this.$router.push({ name: 'Login' })
      }).catch(err => console.log(err))
    }
  },
}
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}

.input_con {
  background-color: white;

  input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    padding: 14px 18.8px;
    font-size: 18px;
    box-sizing: border-box;
  }
}
.login_con {
  font-size: 18px;
  color: #fff;
  background-color: #4cd964;
  text-align: center;
  margin: 20px 10px;
  border: 1px;
  border-radius: 5px;
  padding: 10px 0;
}
</style>